import Api from '@/services/ant-design-pro/index';
import { SettingFilled, SmileTwoTone } from '@ant-design/icons';
import { Button, Image, Input, message } from 'antd';
import { useState } from 'react';
import style from '../index.less';
interface IProps {
  avatar: string;
  id: string | number;
  type?: 'comment' | 'reply';
  author?: string;
  articleID: number;
  commentID?: string;
  getComment: () => void;
}

const MyComment: React.FC<IProps> = ({
  avatar,
  id,
  articleID,
  getComment,
  type,
  author,
  commentID,
}) => {
  const [comment, setComment] = useState<string>('');

  const onSubmit = () => {
    const data = {
      userID: id,
      comment: comment,
      articleID: articleID,
      upStar: 0,
      downStar: 0,
    };

    if (type === 'reply') {
      Api.Exercise03.replyComment({ ...data, commentID }).then((res: any) => {
        if (res.status === 200) {
          setComment('');
          message.success('回复成功');
        }
        getComment();
      });
    } else {
      Api.Exercise03.addComment(data).then((res: any) => {
        if (res.status === 200) {
          setComment('');
          message.success('评论成功！');
        }
      });

      getComment();
    }
  };

  return (
    <div className={style.myComment}>
      <Image className={style.avatar} preview={false} src={avatar}></Image>
      <div className={style.commentContainer}>
        <Input
          className={style.inputComment}
          value={comment}
          onChange={(e) => setComment(e.target.value)}
          placeholder={type === 'reply' ? `回复 @${author}` : '你渴望拥有力量吗？评论让力量更强大'}
        ></Input>
        <div className={style.links}>
          <div className={style.left}>
            <span className={style.icon}>
              <SmileTwoTone />
            </span>
            <span className={style.icon}>@</span>
            <span className={style.icon}>
              <SettingFilled />
            </span>
          </div>
          <div className={style.right}>
            <Button type="primary" onClick={() => onSubmit()}>
              发布
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MyComment;
